<template>
  <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
  <el-container style="height: 1000px; border: 1px solid #eee">
    <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
      >鞋稳定性指标分析工具</el-header
    >
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i>导航</template
            >
            <el-menu-item index="1-1">
              <router-link to="/cal" class="custom-link">计算界面</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/settings" class="custom-link"
                >配置参数界面</router-link
              >
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <h1 style="text-align: center">参数配置界面</h1>
        <!-- <span
          style="
            font-weight: bold;
            font-size: 18px;
            border: 2px solid #6c757d;
            padding: 5px;
          "
          >参数设置</span
        > -->
        <el-row>
          <el-col :span="12">
            <span class="parameter-label">腿COM口</span>
            <el-input v-model="legDataFileName" style="width: 280px"></el-input>
          </el-col>
          <el-col :span="12">
            <span class="parameter-label">脚COM口</span>
            <el-input
              v-model="footDataFileName"
              style="width: 280px"
            ></el-input>
          </el-col>
        </el-row>
        <br />

        <div
          style="border-top: 1px solid #ccc; height: 0; margin-top: 20px"
        ></div>
        <br /><br />
        <!-- //参数设置行 -->
        <el-row>
          <el-col :span="2">
            <span class="minParameter">m</span>
            <el-input v-model="m" style="width: 50px"></el-input>
          </el-col>

          <el-col :span="2">
            <span class="minParameter">n</span>
            <el-input v-model="n" style="width: 50px"></el-input>
          </el-col>

          <el-col :span="2">
            <span class="minParameter">p</span>
            <el-input v-model="p" style="width: 50px"></el-input>
          </el-col>
          <el-col :span="2">
            <span class="minParameter">q</span>
            <el-input v-model="q" style="width: 50px"></el-input>
          </el-col>
          <el-col :span="2">
            <span class="minParameter">r</span>
            <el-input v-model="r" style="width: 50px"></el-input>
          </el-col>

          <el-col :span="10" style="margin-left: 140px">
            <span class="parameter-label">补偿值设置</span>
            <el-input v-model="compensationV" style="width: 80px"></el-input>
          </el-col>
        </el-row>
        <br /><br /><br />
        <el-button type="primary" plain @click="settingSubmit()"
          >提交</el-button
        >
        <br />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      //数据存放区域
      compensationV: 0,
      //指数变量
      m: 1.0,
      n: 1.0,
      p: 1.0,
      q: 1.0,
      r: 1.0,
      //COM口变量
      legDataFileName: "COM11",
      footDataFileName: "COM10",
    };
  },
  methods: {
    settingSubmit() {
      if (
        this.m.length == 0 ||
        this.n.length == 0 ||
        this.p.length == 0 ||
        this.q.length == 0 ||
        this.r.length == 0 ||
        this.compensationV.length == 0 ||
        this.footDataFileName.length == 0
      ) {
        alert("(除腿COM口外)参数输入不能为空!!");
        return;
      }
      //提交前先检查n、m、p、q、r、compensationV是否是数字
      if (
        !this.isNumber(this.m) ||
        !this.isNumber(this.n) ||
        !this.isNumber(this.p) ||
        !this.isNumber(this.q) ||
        !this.isNumber(this.r) ||
        !this.isNumber(this.compensationV)
      ) {
        alert("有非法格式的输入，请检查一下！");
        return;
      }
      axios
        .get("http://127.0.0.1:8080/param", {
          params: {
            compensationV: this.compensationV,
            m: this.m,
            n: this.n,
            p: this.p,
            q: this.q,
            r: this.r,
            legDataFileName: this.legDataFileName,
            footDataFileName: this.footDataFileName,
          },
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 0) {
            alert(res.data.msg);
          } else {
            alert("设置成功");
          }
        });
    },
    //判断是否为数字的方法
    isNumber(value) {
      return !isNaN(parseFloat(value)) && isFinite(value);
    },
  },
  mounted() {
    axios.get("http://127.0.0.1:8080/get-param").then((res) => {
      console.log(res.data);
      let settingParam = res.data.data;
      this.compensationV = settingParam.compensationV;
      this.m = settingParam.m;
      this.n = settingParam.n;
      this.p = settingParam.p;
      this.q = settingParam.q;
      this.r = settingParam.r;
      this.legDataFileName = settingParam.legDataFileName;
      this.footDataFileName = settingParam.footDataFileName;
    });
  },
};
</script>

<style scoped >
.parameter-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.parameter-label {
  /* 给字体的span调整宽度 */
  width: 120px;
  text-align: right;
  margin-right: 10px;
}

.minParameter {
  margin-right: 10px;
  font-size: 18px;
}

.el-input {
  width: 50px;
}
/* 导航链接样式 */
.custom-link {
  text-decoration: none; /* 去除下划线 */
  color: inherit; /* 使用默认颜色 */
}
</style>